<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>

<script src="js/libs/charts/jquery.flot.min.js"></script>

<script src="js/libs/charts/jquery.flot.pie.min.js"></script>
<style>
<!--
#incidentProjectChart .flot-tick-label {
	text-overflow: ellipsis; overflow: hidden; max-height: 20px;
}
-->
</style>
<div class="box no-border" style="padding:0px 0 5px 0px">
	<div class="m m7 box-left" style="width:30%;height:150px">
		<div class="mt header">
			<h3>按事件级别分布</h3>
		</div>
		<div class="mc">
			<div id="incidentPriorityChart" style="height: 110px;"></div>
		</div>

	</div>

	<div class=" m m7 box box-right" style="width:68%;">
		<div class="mt header">
			<h3>按事件状态分布</h3>
		</div>
		<div class="mc">
			<div id="incidentStatusChart" style="height: 115px;"></div>
		</div>
	</div>
</div>

<div class="box no-border">

	<div class="m m7 box-left" style="width:30%;height:150px">
		<div class="mt header">
			<h3>按SLA状态分布</h3>
		</div>
		<div class="mc">
			<div id="incidenSLAStatusChart" style="height: 110px;"></div>
		</div>
	</div>

	<div class=" m m7 box box-right" style="width:68%;">
		<div class="mt header">
			<h3>所在项目分布</h3>
		</div>
		<div class="mc">
			<div id="incidentProjectChart" style="height: 110px;"></div>
		</div>
	</div>
</div>

<script type="text/javascript">
	//var priorityColors = [ "#D13936", "#C88663", "#D9C65F", "#100FB2", "#6EB332" ];

	$.getJSON("incident/incident/getPriorityData", function(json) {
		var priorityColors = [];

		$(json).each(function(index, item) {
			switch (item.label) {

			case "一级":
				priorityColors.push("red");
				break;
			case "二级":
				priorityColors.push("orange");
				break;
			case "三级":
				priorityColors.push("yellow");
				break;
			case "四级":
				priorityColors.push("blue");
				break;
			case "五级":
				priorityColors.push("green");
				break;
			case "未设置级别":
				priorityColors.push("gray");
				break;
			}
		});

		createPlotChartByJsonData(json, "事件级别", "priority_name", "incidentPriorityChart", priorityColors);
	});

	$.getJSON("incident/incident/getStatusData", function(json) {
		createChartByJsonData(json, "状态", "status", "incidentStatusChart");
	});

	$.getJSON("incident/incident/getProjectData", function(json) {
		createChartByJsonData(json, "项目", "project_name", "incidentProjectChart");
	});

	$.getJSON("incident/incident/getSLAStatusData", function(json) {
		var slaColors = [];

		$(json).each(function(index, item) {
			switch (item.label) {
			case "异常":
				slaColors.push("red");
				break;
			case "正常":
				slaColors.push("green");
				break;
			}
		});

		createPlotChartByJsonData(json, "SLA状态", "sla_status", "incidenSLAStatusChart", slaColors);
	});

	function createPlotChartByJsonData(json, name, nameColumn, id, colors, callback) {

		$.plot("#" + id, json, {
			series : {
				pie : {
					show : true,
					radius : 1,
					label : {
						show : true,
						radius : 2 / 3,
						formatter : function(label, series) {
							return '<div style="font-size:14px;text-align:center;padding:2px;color:white;">' + series.data[0][1] + '</div>';

						}
					}

				}
			},
			grid : {
				hoverable : true,
				borderWidth : 2,
				backgroundColor : {
					colors : [ "#ffffff", "#EDF5FF" ]
				},
				clickable : true
			},
			colors : colors,
		});

		$("#" + id).bind("plotclick", function(event, pos, item) {
			if (item && item.series && item.series.label) {

				var postData = incidentMonitorGrid.jqGrid.jqGrid('getGridParam', 'postData');
				$.extend(postData, {
					filters : ""
				});
				var filters = [ {
					"field" : "process_id",
					"op" : "ne",
					"data" : ""
				} ];

				if (item.series.label == "正常") {

					filters.push({
						"field" : nameColumn,
						"op" : "ne",
						"data" : 1
					});

				} else if (item.series.label == "异常") {

					filters.push({
						"field" : nameColumn,
						"op" : "eq",
						"data" : 1
					});
				} else if (item.series.label == "未设置级别") {
					filters.push({
						"field" : nameColumn,
						"op" : "isnull",
						"data" : ""
					});
				} else {
					filters.push({

						"field" : nameColumn,
						"op" : "eq",
						"data" : item.series.label
					});
				}

				incidentMonitorGrid.search(filters);
				$("#incidentMonitorTitle").text(name + "【" + item.series.label + "】事件监控列表");
			}
		});

	}

	function createChartByJsonData(json, name, nameColumn, id, callback) {

		var data = [ json.length ];
		var ticks = [ json.length ];
		for ( var i = 0; i < json.length; i++) {
			var val = json[i];
			var labelTxt = val[nameColumn];
			if (labelTxt) {
				Array
				arr = new Array(i, val.result_count);

				labelTxt

				Array
				tArr = new Array(i, val[nameColumn]);

				data[i] = arr;
				ticks[i] = tArr;
			}
		}

		var dataset = [ {
			label : "按" + name + "分布图",
			data : data,
			color : "#5482FF"
		} ];

		var options = {
			series : {
				bars : {
					show : true,
					showNumbers : true
				}
			},
			bars : {
				align : "center",
				barWidth : 0.5
			},
			xaxis : {
				axisLabel : name,
				mode: "categories",
				tickLength: 0,
				ticks : ticks
			},
			yaxis : {
				axisLabel : "按" + name + "发布"
			},
			legend : {
				noColumns : 0,
				labelBoxBorderColor : "#000000",
				position : "nw"
			},
			grid : {
				hoverable : true,
				borderWidth : 2,
				backgroundColor : {
					colors : [ "#ffffff", "#EDF5FF" ]
				},
				clickable : true
			}
		};

		$.plot($("#" + id), dataset, options);

		$("#" + id).bind("plotclick", function(event, pos, item) {
			if (item && item.series && item.series.yaxis) {

				var postData = incidentMonitorGrid.jqGrid.jqGrid('getGridParam', 'postData');
				$.extend(postData, {
					filters : ""
				});

				incidentMonitorGrid.search([ {
					"field" : "process_id",
					"op" : "ne",
					"data" : ""
				}, {
					"field" : nameColumn,
					"op" : "eq",
					"data" : item.series.xaxis.ticks[item.dataIndex].label
				} ]);
				$("#incidentMonitorTitle").text(name + "【" + item.series.xaxis.ticks[item.dataIndex].label + "】事件监控列表");
			}
		});

	}

	function incidentMonitorGridActions(rowObject) {
		return isperp.createGridAction({
			title : '催办',
			iconCls : 'icon-notify',
			onclick : "isperp.openDialog({title:'事件催办',windowSize:'normal',contentUrl:'app/message/sender/sendEdit?title=【催办】事件编号【" + rowObject.title + "】请速处理&sourceId=" + rowObject.id + "'})"
		}) + isperp.createGridAction({
			title : '转派',
			iconCls : 'icon-change',
			onclick : "isperp.workflow.transferAssignee('" + rowObject.process_id + "')"
		});

	}
</script>
</script>

<div class="box">

	<div class="header">
		<h3 id="incidentMonitorTitle">事件信息</h3>
	</div>
	<isperp:grid url="incident/incident/monitorList" showSearchbar="false"
		datatype="local" gridId="incidentMonitorGrid" sortname="code"
		sortorder="desc" cusViewUrl="incident/incident/view" actionsWidth="90"
		ondbClickRowEvent="incidentMonitorGrid.view(rowid);"
		showToolbar="false"
		cusActions="incidentMonitorGridActions(rowObject);">
		<jsp:body>
	<isperp:column name="id" title="id" hidden="true"></isperp:column>
	<isperp:column name="process_id" title="process_id" hidden="true"></isperp:column>
	<isperp:column name="sla_status" title="" hidden="true"></isperp:column>
	<isperp:column name="priority_name" title="" width="40"
				isFormatterFun="true" formatter="return statusFormatter(rowObject);">
	</isperp:column>
	<isperp:column name="code" title="编号" width="100">
	</isperp:column>
	<isperp:column name="title" title="标题" width="120">
	</isperp:column>

	<isperp:column name="icd_category_name" title="事件类型" width="100">
	</isperp:column>

	<isperp:column name="cus_user_name" title="请求人" width="75">
	</isperp:column>
	<isperp:column name="create_date" title="登记时间" width="110">
	 </isperp:column>
	<isperp:column name="status" title="状态" width="60">
	</isperp:column>
	<isperp:column name="solver_name" title="当前处理人" width="75">
	</isperp:column>
	<isperp:column name="project_name" title="项目" width="130">
	</isperp:column>
	</jsp:body>

	</isperp:grid>

</div>
<isperp:operate code="INC_MONITOR"></isperp:operate>

<script type="text/javascript">
	function statusFormatter(rowObject) {
		var p = 0, html = "", title = "";
		if (rowObject.priority_name != null) {

			switch (rowObject.priority_name) {
			case "一级":
				p = 1;
				break;
			case "二级":
				p = 2;
				break;
			case "三级":
				p = 3;
				break;
			case "四级":
				p = 4;
				break;
			case "五级":
				p = 5;
				break;
			}
			title = "优先级：" + p + "级";
		} else {
			title = "未确定优先级";
		}

		html = "<img title='"+title+"' src='img/incident/p"+p+".png'>";
		if (rowObject.sla_status == 1) {

			html = html + "&nbsp;<img title='SLA：异常'  src='img/incident/sla_unusual.png'>";
		}
		return html;
	}
</script>